<template>
  <div class="container flex-row align-center justify-between">
    <div>
      <el-button
        type="primary"
        @click="changeCollapse"
        icon="el-icon-s-operation"
        size="small"
      ></el-button>
    </div>

    <div v-if="isLogin" class="user">
      <el-dropdown @command="command">
        <div class="profilePhoto flex-row align-center">
          <el-avatar :size="40" :src="$img + userInfo.ProfilePhoto"></el-avatar>
          <i class="el-icon-arrow-down"></i>
        </div>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item command="pwd">修改密码</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
    <el-dialog title="编辑" :visible.sync="pwdUpdateVisible">
      <log-uppwd
        @close="
          () => {
            pwdUpdateVisible = false;
          }
        "
        v-if="pwdUpdateVisible"
      ></log-uppwd>
    </el-dialog>
  </div>
</template>

<script>
import { mapMutations, mapState, mapGetters, createLogger } from "vuex";
import LogUppwd from "@/view/Login/LogUpPwd.vue";
export default {
  data() {
    return { pwdUpdateVisible: false };
  },
  components: {
    LogUppwd,
  },
  computed: {
    ...mapState("user", ["userInfo"]),
    ...mapGetters("user", ["isLogin"]),
  },
  methods: {
    ...mapMutations("menu", ["changeCollapse"]),
    command(com) {
      switch (com) {
        case "pwd":
          this.pwdUpdateVisible = true;

          break;
      }
    },
  },
};
</script>

<style scoped>
.container {
  width: 100%;
}
.user {
  margin-right: 1rem;
}
.profilePhoto {
  column-gap: 1rem;
}
</style>